<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../../css/star_rating.css">
	<link rel="stylesheet" href="../../css/detail_common.css">
	<style media="screen">
		body {
			color: #333333;
		}

		.mui-content {
			background-color: #f2f6f9;
			height: 100%;
		}

		.my-nav {
			background: #498af7;
		}

		.my-nav .mui-title,
		a {
			color: #ffffff;
		}

		.info-header {
			display: flex;
			flex-wrap: nowrap;
			padding: 10px;
			color: #666666;
			overflow: hidden;
		}

		.header-text {
			display: flex;
			flex-direction: column;
			margin-left: 15px;
			font-size: 14px;
			justify-content: space-around;
		}

		.header-img img {
			width: 100px;
			height: 80px;
		}

		.my-title {
			width: inherit;
			font-weight: 500;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.jinji-situation {
			color: orange;
		}

		.info-main {
			font-size: 15px;
		}

		.my-cell-row {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			font-size: 15px;
		}

		.my-cell-cloumn {
			display: flex;
			flex-direction: column;
		}

		.my-cell-title {
			font-size: 15px;
			color: grey;
		}

		.my-cell-name {
			line-height: 36px;
		}

		.circle-name {
			display: inline-block;
			width: 36px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			color: #498af7;
			background-color: lightblue;
			border-radius: 50%;
		}

		.my-cell-paragraph {
			font-size: 15px;
			margin-top: 10px;
			white-space: normal;
			line-height: 24px;
		}

		.my-cell-img {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.my-sm-img {
			width: 33%;
			height: 80px;
			padding: 5px;
		}

		.mui-table-view-cell>a:not(.mui-btn) {
			white-space: normal;
		}

		.btn-bottom {
			margin-top: 20px;
		}

		.my-block-btn {
			width: 90%;
			margin: 20px auto;
			background-color: #498af7;
			padding: 10px 0;
			font-weight: 100;
			border-radius: 5px;
		}

		.mui-table-view {
			margin-bottom: 10px;
		}

		.mui-input-group:before,
		.mui-input-group:after,
		.mui-input-group .mui-input-row:after {
			height: 0;
		}

		.mui-checkbox.mui-left input[type=checkbox],
		.mui-radio.mui-left input[type=radio] {
			left: 0;
		}

		.mui-checkbox.mui-left label,
		.mui-radio.mui-left label {
			padding-left: 38px;
		}

		.cell-between {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.text-lightgrey {
			color: #999999;
			font-size: 15px;
		}

		.mui-input-row textarea {
			font-size: 15px;
		}
		.starRating {
			margin: 10px 0;
		}

		.mui-radio input[type=radio]:before {
			content: '\e441';
		}
		.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
			color: #bebebe;
			font-size: 20px;
			line-height: 1.4;
		}
		.mui-checkbox.mui-left label, .mui-radio.mui-left label {
			padding-left: 28px;
		}

	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav my-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">工单详情</h1>
	</header>
	<header style="display:none;" class="mui-bar mui-bar-nav">
		<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
	</header>
	<div class="mui-content">
		<!-- 头部信息 -->
		<div class="info-header">
		</div>
		<!-- 中部列表信息 -->
		<div class="info-main">
		    <div class="info-main">
		        <ul id="my-table-view01" class="mui-table-view"></ul>
		        <ul id="my-table-view02" class="mui-table-view">
		            <li class="my-mui-table-view-cell">
		                <div class="my-cell-cloumn">
		                    <div class="my-cell-title cell-between"><span>选择服务态度</span><span class="text-lightgrey">5星为最高</span></div>
		                </div>
		                <div class="starRating" id="myStarRating">
		                    <ul>
		                        <li><a href="javascript:;">1</a></li>
		                        <li><a href="javascript:;">2</a></li>
		                        <li><a href="javascript:;">3</a></li>
		                        <li><a href="javascript:;">4</a></li>
		                        <li><a href="javascript:;">5</a></li>
		                    </ul>
		                </div>
		            </li>
		            <li class="my-mui-table-view-cell">
		                <div class="my-cell-cloumn">
		                    <div class="my-cell-title">选择评价内容</div>
		                    <div class="">
		                        <form class="mui-input-group">
															<div class="mui-input-row mui-radio mui-left"><label>师傅的服务态度特别棒</label><input id="radio1" class="radio_s" name="radio1" type="radio"></div>
															<div class="mui-input-row mui-radio mui-left"><label>师傅的技术棒棒哒</label><input id="radio2" class="radio_s" name="radio1" type="radio"></div>
															<div class="mui-input-row mui-radio mui-left"><label>修复速度很快</label><input id="radio3" class="radio_s" name="radio1" type="radio"></div>
		                        </form>
		                    </div>
		                </div>
		            </li>
		            <li class="my-mui-table-view-cell">
		                <a>
		                    <div class="my-cell-cloumn">
		                        <div class="my-cell-title">其他评价</div>
		                        <div class="mui-input-row" style="margin: 10px 5px;"><textarea id="textarea" rows="5" placeholder="请输入有效的评价内容"></textarea> </div>
		                    </div>
		                </a>
		            </li>
		    </div>
		    <!-- 按钮组 -->
		    <div class="btn-bottom"><button type="button" class="my-block-btn mui-btn mui-btn-primary mui-btn-block">评价</button></div>
	</div>

	<script src="../../js/mui.min.js"></script>
	<script src="../../js/star_rating.js"></script>

	<script type="text/javascript">
		mui.init();

		mui('.mui-scroll-wrapper').scroll();
		(function($) {
			$.ready(function() {
				mui.ajax("https://bird.ioliu.cn/v1?url=http://app.xiaoweicanting.com/hospital.php?m=App&c=orders&a=getOrderInfoById&hospitalid=10&departmentid=11&uid=3&token=dfaf&oid=" + Request("id"), {
					dataType: 'json',
					type: 'get',
					success: function(data) {
						console.log(data.data);
						var orderDetail = data.data;
						// 默认缩略头像设置
						var myCell = orderDetail.addname.split("");
						var myCellNode;
						if (isChinese(orderDetail.addname)) {
							myCellNode = myCell[myCell.length - 1];
						} else {
							myCellNode = myCell[0].toUpperCase();
						}
						console.log(myCellNode);
						// 加急标志设置 faultlevel 1->加急 2->紧急 3->超急
						var faultlevel = "";
						var faultClass = "";
						if (orderDetail.faultlevel == 1) {
							faultlevel = "加急";
							faultClass = "jiaji-situation";
						} else if (orderDetail.faultlevel == 2) {
							faultlevel = "紧急";
							faultClass = "jinji-situation";
						} else if (orderDetail.faultlevel == 3) {
							faultlevel = "超急";
							faultClass = "jinji-situation";
						}
						/*
						故障状态标志-state:
						1-> 待处理
						2-> 处理中
						3-> 待反馈
						4-> 待确认
						*/
						var state = "";
						if (orderDetail.state == 1) {
							state = "待处理"
						} else if (orderDetail.state == 2) {
							state = "处理中"
						} else if (orderDetail.state == 3) {
							state = "待反馈"
						} else if (orderDetail.state == 4) {
							state = "待确认"
						}
						var header_text = document.querySelector(".info-header");
						console.log(header_text);
						header_text.innerHTML = "<div class=\"header-img\"><img src=\"http://app.xiaoweicanting.com/" + orderDetail.equipmentpic + " \" alt=\"\"></div><div class=\"header-text\"><div class=\"my-title\">" + orderDetail.equipmentname + "</div><div class=\"my-subTitle\">编号: " + orderDetail.equipmentid + "</div><div class=\"my-subTitle\">工单等级: <span class=\" " + faultClass + " \">" + faultlevel + "</span></div></div>";
						var my_table01 = document.getElementById("my-table-view01");

						my_table01.innerHTML = "<li class=\"mui-table-view-cell\"><a><div class=\"my-cell-row\"><div class=\"my-cell-title\"><span class=\"circle-name\">" + myCellNode + "</span> " + orderDetail.addname + "</div><div class=\"my-cell-name\">" + orderDetail.departmentname + " " + orderDetail.addurole + "</div></div></a></li><li class=\"mui-table-view-cell\"><a><div class=\"my-cell-row\"><div class=\"my-cell-title\">提交时间</div><div>" + orderDetail.addtime + "</div></div></a></li><li class=\"mui-table-view-cell\"><a><div class=\"my-cell-row\"><div class=\"my-cell-title\">故障状态</div><div>" + state + "</div></div></a></li><li class=\"mui-table-view-cell\"><a><div class=\"my-cell-row\"><div class=\"my-cell-title\">故障原因</div><div>" + orderDetail.reason + "</div></div></a></li>"

					},
					error: function(err) {
						console.log(err);
					}
				})

			})
		})(mui);
		// 中文判断
		function isChinese(text) {
			var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
			if (reg.test(text)) {
				return true;
			} else {
				return false;
			}
		}
		// url检索
		function Request(name) {
			new RegExp("(^|&)" + name + "=([^&]*)").exec(window.location.search.substr(1));
			return RegExp.$2
		}


	</script>
</body>

</html>
